/**
 * @author comahead
 */
function NavItem(target, color, scrollVal) {
	this.scrollVal = scrollVal;
	this.target = target;
	this.color = color;
	this.size = null;
	this.circleProg = null;
	
	

	var el = this.target[0];
	
	if (window['G_vmlCanvasManager'] && !this.getContext) G_vmlCanvasManager.initElement(el);
	
	this.context = el.getContext("2d");
	
	this.context = this.target[0].getContext("2d");
	
	this.mouseInside = false;
	$(this.target).bind({
		//click: 		$.proxy(this.clickHandler, this)
		//mouseenter: $.proxy(this.mouseEnterHandler, this),
		//mouseleave: $.proxy(this.mouseLeaveHandler, this)
	});
	TWEEN.fps = 12;
	this._redraw();
}

NavItem.prototype.clickHandler = function(event) {
	window.scrollTop = this.scrollVal;
}

NavItem.prototype.tweenUpdate = function(size)
{
	this.update(this.size, 0);
}

NavItem.prototype.mouseEnterHandler = function(event) {
	var updateHandler = $.proxy(this.tweenUpdate,this);
	var tween = new TWEEN.Tween(this).to({size:1}, 500).onUpdate(updateHandler).easing(TWEEN.Easing.Cubic.EaseOut).start();
}

NavItem.prototype.mouseLeaveHandler = function() {
	var updateHandler = $.proxy(this.tweenUpdate,this);
	var tween2 = new TWEEN.Tween(this).to({size:0}, 500).onUpdate(updateHandler).easing(TWEEN.Easing.Cubic.EaseOut).start();
}

NavItem.prototype.update = function(size, circleProg) {
	if(this.size != size || this.circleProg != circleProg)
	{
		this.size = size;
		this.circleProg = circleProg;
		this._redraw();
	}
}

NavItem.prototype._redraw = function() {
	this.context.clearRect(0,0,50,50);
	var startAngle = 0;
	var endAngle = this.circleProg * Math.PI*2;	//this.circleProg * Math.PI*2;
	var startX = 25;
	var startY = 25;

	// Max radius should be this + 5 = 24. dia 50px
	var radius = 14 + this.size * 5;

	if(endAngle > 0)
	{
		this.context.lineWidth = 3;
		this.context.strokeStyle = this.color; 
		this.context.beginPath();
		this.context.arc(startX, startY, radius + 3, startAngle, endAngle, false);
		this.context.stroke();
	}
	this.context.fillStyle = this.color;
	this.context.beginPath();
	this.context.arc(startX, startY, radius, startAngle, Math.PI * 2, true);
	this.context.fill();
}

// Nav
function Nav(){
	this.progress = 0;
	this.items = [];
	this.items.push(new NavItem($('#nav-item-1'), '#86D3E4', 500));
	this.items.push(new NavItem($('#nav-item-2'), '#96E75B', 2500));
	this.items.push(new NavItem($('#nav-item-3'), '#F67241', 4500));
	//this.updateScroll(.97);
}

// Restrict number to 0...1	
Nav.prototype.clamp = function (n){
	return Math.max(Math.min(1, n), 0);
}

// Get the size of the dot given  value 0...1 indicating progress thru a section:	
Nav.prototype.getSize = function (p){
	if(p == 0 || p ==1) return 0;
	if(p < .2)return p /.2;
	else if(p > .8)return (1-p) /.2;
	return 1;
}
// Get progress of circle given value 0...1 indicating progress thru a section:	
Nav.prototype.getProg = function (n){
	if(n < .2 || n > .8)return 0;
	return (n - .2) / .6;
}
	
Nav.prototype.updateScroll = function (val){

	this.progress = val*3;

	var p1 = this.clamp(this.progress-.1);
	var p2 = this.clamp(this.progress-1.1);
	var p3 = this.clamp(this.progress-2);
	
	if(!this.items[0].mouseInside)this.items[0].update(this.getSize(p1), this.getProg(p1));
	if(!this.items[1].mouseInside)this.items[1].update(this.getSize(p2), this.getProg(p2));
	if(!this.items[2].mouseInside)this.items[2].update(this.getSize(p3), this.getProg(p3));
	
}

// Set % height of load progress bar takes value 0...100
Nav.prototype.setLoadProgress = function(percent){
	if(isNaN(percent)) percent = 0;
	$('#load-progress-display').css('height', percent + '%');
}

Nav.prototype.hideLoadProgress = function() {
	$('#load-progress-display').hide();
}

TWEEN.start();
var nav = new Nav();



	


	